<template>
    <div>
        <div id="headerDiv">
            <div v-for="(item,index) in children" :key="index" class="headerItem" :class="item.isActive?'headerItemActive':''" @click="clickHeader(item)">{{item.header}}</div>
        </div>
        <slot :is="JTabItem">
        </slot>
    </div>
</template>

<script>
import JTabItem from "./JTabItem.vue"
export default {
    name:"JTab",
    data(){
        return{
            children:this.$children
        }
    },
    components:{
        JTabItem
    },
    created(){
    },
    mounted(){
        if(this.$children && this.$children.length > 0)
        {
            this.$children[0].isActive = true;
        }
    },
    methods:{
        clickHeader(item){
            this.$children.forEach((item)=>{
                item.isActive = false;
            })
            item.isActive = true;
        }
    }
}
</script>
<style scoped>
#headerDiv{
    display: flex;
}
.headerItem{    
    padding:10px;
    border:1px solid #ccc;
    border-bottom: none;
    border-right: none;
    cursor: pointer;
    user-select: none;
    border-radius: var(--theme-border-radius,2px) var(--theme-border-radius,2px) 0 0;
}
.headerItem:last-child{
    border-right: 1px solid #ccc;
}
.headerItemActive{
    background-color: var(--theme-primary-color);
    color: var(--theme-obprimary-color);
}
</style>